<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>泡泡侠首页----按件洗</title>
  <link rel="stylesheet" href="css/app.css">
  <script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
         
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
  <base target="_blank"></head>
<body>
<section id="wrapper">
  
  
  <section id="header" pp_name="悬浮页头">
    <div class="header header_jmb">
      <a href="#" class="l on"><span >按件洗</span></a>
      <a href="#" class="m "><span >包月洗</span></a>
      <a href="#" class="r "><span >称重洗</span></a>
    </div>
  </section>
  <section id="jmb_body">
    <div class="jmb_body">
      <div class="nav" >
        <ul id="jmb_nav">
          <li class="on">9元一件</li>
          <li>19元一件</li>
          <li>29元一件</li>
          <li>69元一件</li>
          <li>99元一袋</li>
        </ul>
      </div>
      <div class="tab tab_a bottom" >
        <div class="type" id="type9" >
          <img src="images/type9_1.jpg" alt="">
          <img src="images/type9_2.jpg" alt="">
        </div>
        <div class="type" id="type19" style="display:none">
          <img src="images/type19_1.jpg" alt="">
          <img src="images/type19_2.jpg" alt="">
        </div>
        <div class="type" id="type29" style="display:none">
          <img src="images/type29_1.jpg" alt="">
        </div>
        <div class="type" id="type69" style="display:none">
          <img src="images/type69_1.jpg" alt="">
        </div>
        <div class="type" id="type99" style="display:none">
                </div>
        <div class="clear"></div>
      </div>
      
      
      
    </div>
  </section> 
  <section id="footer" pp_name="悬浮页脚">
    <div class="footer">
      <a href="#" class="l on"><span >洗衣</span></a>
      <a href="#" class="m "><span >订单</span></a>
      <a href="#" class="r "><span >个人</span></a>
    </div>
  </section>
</section>
<script src="js/jquery-1.10.1.min.js"></script>
<script>


 
 
$(document).ready(function(){

   $("#jmb_nav li").click(function(){
    // cosole.log("s");
    if(!$(this).hasClass("on")){
        $(this).addClass("on");
        $(this).siblings().removeClass("on");
        var hide_box=$(".jmb_body .type").eq($(this).index());
        $(hide_box).slideDown();
        $(hide_box).siblings().slideUp();
    }
});     



});
</script>
</body>
</html>